<template>
	<view class="">
		<view class="app">
			<view class="cell row b-b">
				<text class="tit">联系人</text>
				<input
					class="input"
					type="text"
					maxlength="10"
					v-model="address.name"
					placeholder="请输入联系人姓名"
					placeholder-class="placeholder"
				/>
			</view>
			<view class="cell row b-b">
				<text class="tit">联系电话</text>
				<input
					class="input"
					type="number"
					maxlength="11"
					v-model="address.phone"
					placeholder="请输入联系电话"
					placeholder-class="placeholder"
				/>
			</view>
			<view class="cell row  fill b-b" @tap="visibleCity = true">
				<text class="tit">地址</text>
				<text class="input clamp placeholder"  v-if="!address.province">请选择</text>
				<text class="input clamp" v-else>{{ address.province}}{{ address.city}}{{ address.county}}</text>
				<text class="mix-icon icon-you"></text>
			</view>
			<view class="">
				<view class="tit">
					详细地址
					<text class="placeholder" style="margin-left: 30upx;">街道、楼牌等</text>
				</view>
				<textarea class="textarea" maxlength="20" type="text" v-model="address.detail" placeholder="请输入详细地址" />
			</view>
			<view class="cell row">
				<text class="tit fill">设为默认地址</text>
				<switch :checked="address.isDefault == 1" style="transform: scale(.7);" color="#cc1313" @change="onSwitchChange" />
			</view>
			<view class="btn" hover-class="hover-opacity" @tap="submit">提交</view>
		</view>
		<mix-loading v-if="isLoading" :mask="true"></mix-loading>
		<u-picker mode="region" :params="params" v-model="visibleCity" @confirm="onConfirm" confirm-color="#cc1313"></u-picker>
	</view>
</template>

<script>
import {checkStr} from "@/common/js/util";
export default {
	data() {
		return {
			id: "",
			visibleCity: false,
			params: {
				province: true,
				city: true,
				area: true
			},
			address: {
				name: "",
				phone: "",
				province: "",
				city: "",
				county: "",
				detail: "",
				isDefault: ""
			}
		};
	},
	onLoad(options) {
		if(options.type){
			this.address=getApp().globalData.addressItem;
		}
	},
	methods: {
		onConfirm(e) {
			console.log(e);
			this.address.province = e.province.label ;
			this.address.city =e.city.label;
			this.address.county =e.area.label;
		},
		submit() {
			this.$util.throttle(async () => {
				let url="",text="";
				const data = this.address;
				if (!data.name) {
					this.$util.msg("请输入报修人姓名");
					return;
				}
				if (!checkStr(data.phone, "mobile")) {
					this.$util.msg("请输入正确的手机号码");
					return;
				}
				if (!data.province) {
					this.$util.msg("请选择您所在地区");
					return;
				}
				if (!data.detail) {
					this.$util.msg("请输入您的详细地址");
					return;
				}
				data.uid=uni.getStorageSync('uid');
				data.id?(url="address/edit",text="修改成功!"):(url="address/add",text="保存成功!");
				const res = await this.$request(url, data, {showLoading: true});
				if (res.result == 0) {
					this.$util.msg(text);
					uni.$emit('addressUpdate')
					this.back();
				}else{
					this.$util.msg(res.msg);
				}
			});
		},
		//设置收货地址
		setAddress(item) {
			this.address.address = `${item.address}(${item.title})`;
			this.address.longitude = item.location.lng;
			this.address.latitude = item.location.lat;
		},
		onSwitchChange(e) {
			console.log(e)
			e.detail.value ? (this.address.isDefault = "1") : (this.address.isDefault = "0");
		}
	}
};
</script>

<style scoped lang="scss">
.textarea {
	width: 100%;
	height: 228upx;
	background: #f6f6f6;
	padding: 20upx;
}
.btn {
	position: fixed;
	bottom: 50upx;
	left: 25upx;
	z-index: 99;
	width: 700upx;
	line-height: 79upx;
	text-align: center;
	background: #cc1313;
	color: #ffffff;
	font-size: 30upx;
	border-radius: 39upx;
}

.app {
	padding: 10rpx 20rpx 0;
}

.tit {
	min-width: 150rpx;
	font-size: 26rpx;
	color: #666666;
	line-height: 100upx;
}

.cell {
	height: 100upx;

	.input {
		flex: 1;
		font-size: 26upx;
		color: #333;
	}

	.icon-you {
		flex-shrink: 0;
		margin-right: 8rpx;
		margin-left: 40rpx;
		font-size: 24rpx;
		color: #aaa;
	}
}
</style>
